
<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title> - Hexo</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="Fechin,"> 
    <meta name="description" content="字节跳动-web前端开发 电商管理面试准备一. HTML css javsscript面试基础HTML
浏览器内核(主要是谷歌，iE，火狐)
HTML5新增特性123456789101. canva,"> 
    <meta name="author" content="John Doe"> 
    <link rel="alternative" href="atom.xml" title="Hexo" type="application/atom+xml"> 
    <link rel="icon" href="/hexo/img/favicon.png"> 
    
    
<link rel="stylesheet" href="/hexo/css/diaspora.css">

	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({
              google_ad_client: "ca-pub-8691406134231910",
              enable_page_level_ads: true
         });
    </script>
    <script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
<meta name="generator" content="Hexo 5.3.0"></head>

<body class="loading">
    <span id="config-title" style="display:none">Hexo</span>
    <div id="loader"></div>
    <div id="single">
    <div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="iconfont icon-home image-icon" href="javascript:;" data-url="https://gitee.com/codewhya"></a>
    <div title="播放/暂停" class="iconfont icon-play"></div>
    <h3 class="subtitle"></h3>
    <div class="social">
        <div>
            <div class="share">
                <a title="获取二维码" class="iconfont icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title"></h1>
        <div class="stuff">
            <span>七月 11, 2021</span>
            

        </div>
        <div class="content markdown">
            <h2 id="字节跳动-web前端开发-电商管理面试准备"><a href="#字节跳动-web前端开发-电商管理面试准备" class="headerlink" title="字节跳动-web前端开发 电商管理面试准备"></a>字节跳动-web前端开发 电商管理面试准备</h2><h3 id="一-HTML-css-javsscript面试基础"><a href="#一-HTML-css-javsscript面试基础" class="headerlink" title="一. HTML css javsscript面试基础"></a>一. HTML css javsscript面试基础</h3><h4 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h4><ol>
<li>浏览器内核(主要是谷歌，iE，火狐)</li>
<li>HTML5新增特性<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> canvas绘画</span><br><span class="line"><span class="number">2.</span> video和audio的媒体回放</span><br><span class="line"><span class="number">3.</span> 本地离线存储<span class="built_in">localStorage</span>长期存储数据即使关闭浏览器仍然存在</span><br><span class="line"><span class="number">4.</span> sessionStorage存储,浏览器关闭即销毁</span><br><span class="line"><span class="number">5.</span> 语义化更好的标签nav header footer section article</span><br><span class="line"><span class="number">6.</span> webworker(随着多核CPU出现,而js是单线程无法充分发挥计算机的计算能力,会创建worker进程) websocket Geolocation</span><br><span class="line"><span class="number">7.</span> cookie由服务器端产生并且发送到浏览器存储大小一般比较小 sessionStorage存在于浏览器端,存储大小一般为5M,关闭浏览器就失效,<span class="built_in">localStorage</span>会永久存储除非主动删除,存储大小一般为5M</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li>Css<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 元素分类包括块元素(div p h form ul)和行内元素(span a input label)</span><br><span class="line"><span class="number">2.</span> css隐藏元素opacity <span class="number">0</span> display none  visibility(元素不可见) hidden; </span><br><span class="line"><span class="number">3.</span> 清除浮动clear  overflower css after伪元素</span><br><span class="line"><span class="number">4.</span> 居中 行内元素text-align center 垂直居中height=lineHeight 块元素 flex justify-content center   align-item center</span><br><span class="line">margin auto  或者position absolute top <span class="number">50</span>% left <span class="number">50</span>% transform(trasnLate(-<span class="number">50</span>%,-<span class="number">50</span>%))</span><br><span class="line"><span class="number">5.</span> ie浏览器的bug z-index问题(解决方法给父元素加position reactive )</span><br><span class="line"><span class="number">6.</span> link和@Import区别 link是XHTML标签而@Import是css提供的用于加载css link会在页面加载的时候直接加载 @Import会在页面加载完后加载</span><br><span class="line"><span class="number">7.</span> css盒子模型 包括padding margin content border iE的padding和margin 包括在content中这就是为什么box-sizeing  = border-box就是为了消除margin 和padding 对content的影响 </span><br><span class="line"><span class="number">8.</span> 选择器 id 类 标签 后代 等等选择器</span><br><span class="line"><span class="number">9.</span> css3特性 box-radius box-shadow gradient transform animation</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li>Javascript<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 五个基本类型 number string boolean Null underfine</span><br><span class="line"><span class="number">2.</span> typeOf测试的五个基本类型 number object fUnction boolean underfine</span><br><span class="line"><span class="number">3.</span> 类型的强制传换(paseInt paseFloat ) 隐式转换(% - + ==)</span><br><span class="line"><span class="number">4.</span> 数组的方法 pop 尾部删除 push 尾部添加 UNshift头部添加 shift 头部删除 还有其他的forEach filter findIndex reduce map some every splice</span><br><span class="line"><span class="number">5.</span> get post 区别 get参数会携带在url上存在严重的安全隐患所以get一般用于请求json数据一些渲染的数据而post则是登录注册的数据</span><br><span class="line"><span class="number">6.</span> call apply区别 第一个参数都是<span class="built_in">this</span> call第二个参数是要传的值apply是数组 </span><br><span class="line"><span class="number">7.</span> 前端解析JSon数据使用Json.parse而发送数据写成Json.stringfy</span><br><span class="line"><span class="number">8.</span> 事件委托就是利用事件冒泡，让自己的所触发的事件，让他的父元素代替执行</span><br><span class="line"><span class="number">9.</span> 闭包是什么 主要作用读取函数的内部变量和让这些变量始终在内存中</span><br><span class="line"><span class="number">10.</span> 增删改查节点的方法 obj.appendChild() obj.insertBefore obj.replaceChild obj.removeChild()</span><br><span class="line"><span class="number">11.</span> javascript的同源策略 就是只能读取同一窗口和文档的属性即主机名协议和端口号</span><br><span class="line"><span class="number">12.</span> 阻止冒泡事件 event.preventDefault</span><br><span class="line"><span class="number">13.</span> <span class="built_in">this</span>首先没有人调用时指向<span class="built_in">window</span> 有人调用指向调用者，箭头函数的<span class="built_in">this</span> 指向上一级 </span><br><span class="line"><span class="number">14.</span> js 原生事件的绑定 鼠标事件click/dbclick/mouseover/mouseout 键盘事件keydown keypress keyup HTML事件 onLoad onsubmit onresize onfocus onscroll onchange  </span><br><span class="line"><span class="number">15.</span> 深浅拷贝(浅拷贝使用的是同一块内存地址,深拷贝使用的是不同的内存地址,数组的解构赋值和contact连接都是浅拷贝,<span class="built_in">Object</span>.assign(a,obj)拷贝时一级对象为深拷贝二级对象为浅拷贝所以可以进行遍历判断是不是数组或对象进行递归调用)</span><br><span class="line"><span class="number">16.</span> Es6  (<span class="keyword">let</span> <span class="keyword">const</span> 箭头函数 set map promise <span class="keyword">async</span> <span class="keyword">await</span> 继承与封装 symbol 解构赋值...)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li>Vue <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 传值(父子我知道)兄弟传值(一般是创建一个公共的js文件使用时引入还可以直接挂载到原型链上<span class="built_in">this</span>.$bus.emit(<span class="string">&#x27;&#x27;</span>,val),<span class="built_in">this</span>.$bus.on(<span class="string">&#x27;&#x27;</span>,val)在main.js创建事件总线 Vue.prototype.$bus = <span class="keyword">new</span> Vue())</span><br><span class="line"><span class="number">2.</span> keep-alive(为了不频繁的被创建可以使用keep-alive将router-view包裹起来会带来两个函数一个是activated(活跃时调用)和deactivated)其中include属性为白名单exclude属性为黑名单(就是keep-alive无效)</span><br><span class="line"><span class="number">3.</span> axios+promise封装（进行axios封装的时候<span class="keyword">export</span> 导出方法 定义一个变量为axios实例然后再里面进行基本配置如baseURL timeout在实例外可进行axios拦截 然后直接<span class="keyword">return</span>实例自己本来就是promise无需封装）</span><br><span class="line"><span class="number">4.</span> 插槽(具名插槽和普通插槽 具名插槽slot标签里面加name template模板里面可以使用slot=“name”接收 或v-slot:name) 动态传值父组件使用v-slot=“slotProps”接收</span><br><span class="line"><span class="number">5.</span> 动态添加属性 如果在computed里面添加属性时是无法动态改变的所以我们在第一次定义属性时使用<span class="built_in">this</span>.$set();方法，即可将该属性添加到Vue的监听中 <span class="built_in">this</span>.$set(<span class="built_in">this</span>.userInfo, <span class="string">&#x27;name&#x27;</span>, <span class="string">&#x27;hangzhou&#x27;</span>);</span><br><span class="line"><span class="number">6.</span> vue数据持久化 vuex 存在一个痛点，就是刷新以后vuex里面存储的state就会被浏览器释放掉（state都是存储在内存中的）所以我选择<span class="built_in">window</span>.localStorage.setItem(key,val)存储</span><br><span class="line"><span class="number">7.</span> mvvm手写如何实现响应式(自己去看代码)</span><br><span class="line"><span class="number">8.</span> 性能优化 懒加载(图片懒加载使用vue-lazyload插件)然后v-lazy可以实现图片的懒加载 防抖(短时间内连续触发事件函数只执行一次)但是当不断的触发时就会一直清除定时器,所以节流就是一定在特定的时间点执行比如定时器500ms(input事件会使用) 安装的js上线会使用对应的CDN服务</span><br><span class="line"><span class="number">9.</span> 路由导航守卫(beforeEach(<span class="function">(<span class="params">to,<span class="keyword">from</span>,next</span>)=&gt;</span>&#123;&#125;)) afterEach(to ,<span class="keyword">from</span>)=&gt;&#123;&#125;)为全局守卫,beforeEnter(<span class="function">(<span class="params">to,<span class="keyword">from</span>,next</span>)=&gt;</span>&#123;&#125;)为单个路由守卫还有组件内部的守卫是用于跳转页面时要处理的事情比如要改变标题等等 页面的标签描述可以写在和components同级的meta&#123;&#125;下全局守卫可用来验证登录的状态状态不对则next(<span class="string">&#x27;/login&#x27;</span>)</span><br><span class="line"><span class="number">10.</span> diff算法(首先遍历老的虚拟DOm再遍历新的虚拟DOM进行重新排序)diff算法的优化就是比较同一层次的节点同一种标签然后遍历key值</span><br><span class="line"></span><br></pre></td></tr></table></figure>








</li>
</ol>
<ol start="10">
<li>自我介绍<h4 id="我叫孙一飞就读于东华理工大学，专业方向是软件工程的前端方向，大二上学期开始在B站自学-学习前端的主流技术比如vue-node-uniapp-小程序等等"><a href="#我叫孙一飞就读于东华理工大学，专业方向是软件工程的前端方向，大二上学期开始在B站自学-学习前端的主流技术比如vue-node-uniapp-小程序等等" class="headerlink" title="我叫孙一飞就读于东华理工大学，专业方向是软件工程的前端方向，大二上学期开始在B站自学,学习前端的主流技术比如vue node uniapp 小程序等等"></a>我叫孙一飞就读于东华理工大学，专业方向是软件工程的前端方向，大二上学期开始在B站自学,学习前端的主流技术比如vue node uniapp 小程序等等</h4></li>
</ol>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="">
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        
                            <li title='0' data-url='http://link.hhtjim.com/163/425570952.mp3'></li>
                        
                    
                        
                            <li title='1' data-url='http://link.hhtjim.com/163/425570952.mp3'></li>
                        
                    
                </ul>
            
        </div>
        
    <div id='gitalk-container' class="comment link"
		data-enable='false'
        data-ae='false'
        data-ci=''
        data-cs=''
        data-r=''
        data-o=''
        data-a=''
        data-d='false'
    >查看评论</div>


    </div>
    
</div>


    </div>
</div>
</body>


<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/hexo/js/plugin.js"></script>
<script src="/hexo/js/typed.js"></script>
<script src="/hexo/js/diaspora.js"></script>


<link rel="stylesheet" href="/hexo/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/hexo/photoswipe/default-skin/default-skin.css">


<script src="/hexo/photoswipe/photoswipe.min.js"></script>
<script src="/hexo/photoswipe/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>






</html>
